{{>/head}}

<!-- ========================================================================================================= 3-Slided Carousel -->
<div class="carouselContainer">
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <!-- ========================================================================================================= Slide 1: -->
            <div class="item active">
                <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
                <div class="container">
                    <div class="carousel-caption">

                       	<div id="wrapper">

                               <h1><span class="logoMidText">Recent Events</h1>

                                <ul id="vertical-ticker">
                                    <li><span class="vcu">27/10/2013</span> - <span class="glyphicon glyphicon-cog"></span> <a class="whitetext" herf="#"> You updated Fast Track Linux - Assignment 1</a> <span class="vcu">+2XP</span> </li>
                                    <li><span class="vcu">26/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> You submitted Fast Track Linux - Assignment 1</a> <span class="vcu">+10XP!</span> </li>
                                    <li><span class="vcu">26/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> You submitted iOS for Dummies - Assignment 2</a> <span class="vcu">+10XP!</span> </li>
                                    <li><span class="vcu">25/10/2013</span> - <span class="glyphicon glyphicon-trash"></span> <a class="whitetext" herf="#"> You deleted iOS for Dummies - Assignment 1 </a> </li>
                                    <li><span class="vcu">24/10/2013</span> <a class="whitetext" herf="#"> <span class="vcu">Congratulations, You've reached level 3!!! (Awarded Code Monkey Badge)</span></a> </li>
                                    <li><span class="vcu">24/10/2013</span> - <span class="glyphicon glyphicon-zoom-in"></span> <a class="whitetext" herf="#"> Andrew Hemby reviewed your Andriod Advanced - Assignment 3</a> <span class="vcu">+5XP</span> </li>
                                    <li><span class="vcu">24/10/2013</span> - <span class="glyphicon glyphicon-zoom-in"></span> <a class="whitetext" herf="#"> Eric Miles reviewed your Andriod Advanced - Assignment 3</a> <span class="vcu">+10XP!</span> </li>

                                    <li><span class="vcu">23/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> You submitted Andriod Advanced - Assignment 3</a> <span class="vcu">+10XP!</span></li>
                                    <li><span class="vcu">22/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> You submitted Camel Fundamentals -  Assignment 1</a> <span class="vcu">+10XP!</span></li>

                               </ul>
                               <a href="#" id="ticker-previous"><span class="whitetext"><span class="glyphicon glyphicon-chevron-left"></span></span></a> <a href="#" id="ticker-next"><span class="whitetext"><span class="glyphicon glyphicon-chevron-right"></span></span></a>

                           </div>

                    </div>
                </div>
            </div>
            <!-- ========================================================================================================= /Slide 1: -->

            <!-- ========================================================================================================= Slide 2: -->
            <div class="item">
                <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">

                       	<div id="wrapper">

                               <h1><span class="logoMidText">Recent Events</h1>

                                <ul id="vertical-ticker2">
                                    <li><span class="vcu">27/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Chris Wash submitted Turbo C - Assignment 1</a> </li>
                                    <li><span class="vcu">27/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Andrew Hemby submitted Maven Impossible - Assignment 1</a> </li>
                                    <li><span class="vcu">26/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Al Coholic submitted Fast Track Linux - Assignment 1</a> </li>
                                    <li><span class="vcu">26/10/2013</span> <a class="whitetext" herf="#"> <span class="vcu"> Mr. Bigglesworth reached level 7!!! (Awarded Code Purrfection Badge)</span></a> </li>
                                    <li><span class="vcu">26/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Mr. Bigglesworth submitted Cookies By Example - Assignment 1</a> </li>
                                    <li><span class="vcu">26/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Al Coholic submitted iOS for Dummies - Assignment 2</a> </li>
                                    <li><span class="vcu">24/10/2013</span> <a class="whitetext" herf="#"> <span class="vcu"> Al Chololic reached level 3!!! (Awarded Code Monkey Badge)</span></a> </li>
                                    <li><span class="vcu">23/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Al Coholic  submitted Andriod Advanced - Assignment 3</a></li>
                                    <li><span class="vcu">22/10/2013</span> - <span class="glyphicon glyphicon-arrow-up"></span> <a class="whitetext" herf="#"> Al Coholic  submitted Camel Fundamentals -  Assignment 1</a></li>

                               </ul>
                               <a href="#" id="ticker2-previous"><span class="whitetext"><span class="glyphicon glyphicon-chevron-left"></span></span></a> <a href="#" id="ticker2-next"><span class="whitetext"><span class="glyphicon glyphicon-chevron-right"></span></span></a>

                           </div>

                    </div>
                </div>
            </div>
            <!-- ========================================================================================================= Slide 2: -->

            <!-- ========================================================================================================= Slide 3: -->
            <div class="item">
                <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h2>Recent Badges</h2>
                        <ul>
                            <li><span class="glyphicon glyphicon-thumbs-up"></span>  Andrew Hemby - Andriod Guru</li>
                        </ul>
                        <p><a class="btn btn-large btn-primary" href="/badges">Goto Badges</a></p>
                    </div>
                </div>
            </div>
            <!-- ========================================================================================================= /Slide 3: -->
        </div>

        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>
<!-- ========================================================================================================= /3 Slide Carousel -->

<!-- ========================================================================================================= row1: User Meta -->
<div class="row">
    <div class="col-md-2"> </div>

    <!-- ========================================================================================================= Left Hand Side Div -->
    <div class="col-md-4">
        <h1><span class="vcu">user</span>.Al Coholic </h1>

        <p class="vcu">Level 3.progress:</p>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>
        <hr>
        <h4>Ongoing Tasks:</h3>
        <h4><a href="#">Fast Track Linux</a></h3>
        <h4><a href="#">iOS for Dummies</a></h3>
    </div>
    <!-- ========================================================================================================= /Left Hand Side Div -->
    <div class="col-md-4">
        <div class="boxedBadges">

            <h3> Accolades </h3>
            <hr>
            <div class="row hideTheFlow2">
                <div class="col-md-3 oneBadge">
                    <p class="greenText">Efficient Code</p>
                    <h1 class="greenIconText"><span class="glyphicon glyphicon-leaf"></h1>
                    <p class="greenText">Count: 4</p>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="pinkText">Everyones Favorite</p>
                    <h1 class="pinkIconText"><span class="glyphicon glyphicon-heart"></h1>
                    <p class="pinkText">Count: 2</p>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="redText">Speedy Submission</p>
                    <h1 class="redIconText"><span class="glyphicon glyphicon-fire"></h1>
                    <p class="redText">Count: 1</p>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="orangeText">Ace Reviewer</p>
                    <h1 class="orangeIconText"><span class="glyphicon glyphicon-thumbs-up"></h1>
                    <p class="orangeText">Count: 1</p>
                </div>
            </div>
        </div>

        <div class="boxedBadges">

            <h3> Badges </h3>
            <hr>
            <div class="row hideTheFlow2">
                <div class="col-md-3 oneBadge">
                    <p class="orangeText">King Coder</p>
                    <h1 class="orangeIconText"><span class="glyphicon glyphicon-tower"></h1>
                    <br>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="blueText">High Flyer</p>
                    <h1 class="blueIconText"><span class="glyphicon glyphicon-send"></h1>
                    <br>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="cyanText">Code Purrfection</p>
                    <h1 class="cyanIconText"><span class="glyphicon glyphicon-screenshot"></h1>
                    <br>
                </div>

                <div class="col-md-3 oneBadge">

                    <p class="redText">High Speed Coder</p>
                    <h1 class="redIconText"><span class="glyphicon glyphicon-road"></h1>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ========================================================================================================= /row1: User Meta -->



</div></center>
{{>/foot}}
    <script type="text/javascript" src="static/js/jquery.totemticker.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#vertical-ticker').totemticker({
				row_height	:	'100px',
				next		:	'#ticker-next',
				previous	:	'#ticker-previous',
				stop		:	'#stop',
				start		:	'#start',
				mousestop	:	true,
			});
		});
	</script>

	    <script type="text/javascript" src="static/js/jquery.totemticker.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$('#vertical-ticker2').totemticker({
    				row_height	:	'100px',
    				next		:	'#ticker2-next',
    				previous	:	'#ticker2-previous',
    				stop		:	'#stop2',
    				start		:	'#start2',
    				mousestop	:	true,
    			});
    		});
    	</script>